<template>
  <div id="app">
    <div class>
      <el-tag class="tar-marigin" type="warning" size="medium">{{
        target.termName
      }}</el-tag>
      <el-tag class="tar-marigin" type="success" size="medium"
        >第 {{ target.week }} 周</el-tag
      >
      <el-tag class="tar-marigin" type="info" size="medium">{{
        target.buildingName
      }}</el-tag>
      <el-tag class="tar-marigin"
        >{{ target.stuTwoName }}、{{ target.stuOneName }}</el-tag
      >
      <el-button
        class="write"
        size="medium"
        type="success"
        @click="write()"
        style="margin-left: 55px"
        >新增</el-button
      >
    </div>

    <!-- 列表  v-loading="dataListLoading"-->
    <el-table :data="dribution" border style="width: 100%">
      <el-table-column
        prop="spotDate"
        header-align="center"
        align="center"
        label="抽查日期"
      ></el-table-column>
      <el-table-column
        prop="roomCount"
        header-align="center"
        align="center"
        label="抽查寝室数"
      ></el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="操作"
        fixed="right"
        width="270px"
      >
        <template slot-scope="scope">
          <el-button type="success" size="small" @click="write(scope.row)"
            >修改</el-button
          >
          <el-button type="danger" size="small" @click="delSpotData(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--     修改    页面   以下-->
    <el-drawer
      @close="resetForm"
      title="填写结果"
      :visible.sync="drawer"
      direction="rtl"
      size="40%"
      ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="form" label-position="right">
          <el-form-item label="抽查日期" label-width="120px">
            <!-- 日期 -->
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker
                :disabled="isUpdate"
                v-model="form.spotDate"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </div>
          </el-form-item>

          <el-form-item label="寝室列表" label-width="120px">
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
            <div style="margin: 15px 0"></div>
            <el-checkbox-group
              :min="1"
              v-model="checkedDorms"
              @change="handleCheckedDormsChange"
            >
              <el-checkbox v-for="dorm in dorms" :label="dorm" :key="dorm">{{
                dorm
              }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item style="margin-left: 55px; margin-right: 60px">
            <el-button size="small" @click="cancelForm">取 消</el-button>
            <el-button
              size="small"
              type="primary"
              @click="isUpdate ? updateSpotLog() : addSpotLog()"
              >提 交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  getWeekTime,
  getDormitory,
  getSpotList, //查询学生抽查计划
  addDistributionData,
  getDistribution, //查看学生值班计划分配详情
  getDistributionList, //学生值班计划分配
  upDataDistributionData, //  学生值班计划分配   修改学生值班计划
  deleteDistributionData, // /dormNight/spotLog   批量删除值班计划 deleteDistributionData
} from '../../api/src/SpotCheckPlan/SpotCheckPlan'
export default {
  name: 'SpotDetails',
  data() {
    return {
      isUpdate: false,
      // 周次开始时间，结束时间
      weekStart: '',
      weekEnd: '',
      pickerOptions: {
        disabledDate: (time) => {
          let start = this.weekStart
          start = start.replace(new RegExp('-', 'gm'), '/')
          const startTime = new Date(start).getTime()

          let end = this.weekEnd
          end = end.replace(new RegExp('-', 'gm'), '/')
          const endTime = new Date(end).getTime()

          return time.getTime() < startTime || time.getTime() > endTime
        },
      },
      formSelect: {
        buidingName: '',
        term: '',
        week: '',
        roomName: '',
      },
      form: {
        buildingId: '',
        buidingName: '',
        week: '',
        weekDayId: '',
        roomName: '',
        spotDate: '',
      },
      target: {
        termName: '',
        buildingName: '',
        week: '',
        id: '',
        stuOneName: '',
        stuTwoName: '',
      },
      dribution: [],
      //  寝室列表项
      dorms: [],
      checkAll: false,
      checkedDorms: [],
      isIndeterminate: true,

      // 修改页 日期 暂时
      value1: '',
      //
      weekData: [],
      list: [],
      drawer: false,
      dataList: [],
      SpotdataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      //dataListLoading: false,  加载效果
      dynamicTags: [],
      dynamicTa: [],
      commitType: true,
      id: '',
      excelData: [],
    }
  },
  created() {
    this.getParams()
    this.getDataList()
    this.getSpotData() //抽查日期 寝室数
  },

  methods: {
    // 获取周次范围
    async getWeekTimeArea() {
      const data = await getWeekTime(this.target.termName, this.target.week)
      this.weekStart = data.data.startDay
      this.weekEnd = data.data.endDay
    },
    // 新增
    async addSpotLog() {
      const data = await addDistributionData(
        this.form.spotDate,
        this.checkedDorms,
        this.target.id
      )
      this.$message.success(data)
      this.drawer = false
      this.getSpotData()
    },
    // 更新
    async updateSpotLog() {
      const data = await upDataDistributionData(
        this.form.spotDate,
        this.checkedDorms,
        this.target.id
      )
      this.$message.success(data)
      this.drawer = false
      this.getSpotData()
    },
    //接受数据
    getParams() {
      // 取到路由带过来的参数
      const routerParams = this.$route.query.id
      this.temp = routerParams
      // 将数据放在当前组件的数据内
    },

    // 获取数据列表
    async getDataList() {
      let parameter =
        '?currentPage=' + this.pageIndex + '&pageSize=' + this.pageSize
      const { records } = await getSpotList(parameter)
      const target = records.find((ele) => ele.id === this.temp)
      this.target.id = target.id
      this.target.termName = target.termName
      this.target.week = target.week
      this.target.buildingName = target.buildingName
      this.target.stuOneName = target.stuOneName
      this.target.stuTwoName = target.stuTwoName

      await getDormitory(this.target.buildingName).then((res) => {
        console.log(res)
        this.dorms = res
      })

      this.getWeekTimeArea()
    },
    //
    async getSpotData() {
      let parameter = '?planId=' + this.temp
      console.log('dsfsdndlf', parameter)
      const dribution = await getDistributionList(parameter)
      // console.log( 'ssssss',dribution )
      this.dribution = dribution
      console.log('fsss', this.dribution)
      // this.dataListLoading = false
    },

    // 修改页 寝室列表
    handleCheckAllChange(val) {
      this.checkedDorms = val ? this.dorms : []
      this.isIndeterminate = false
    },
    handleCheckedDormsChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.dorms.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.dorms.length
    },

    // 修改页面的提交
    async addOneData() {
      for (var i = 0; i < this.dynamicTags.length; i++) {
        if (this.form.spotDate == this.dynamicTags[i].userName) {
          this.form.spotDate = this.dynamicTags[i].userNumber
        }
        if (this.form.stuTwoName == this.dynamicTags[i].userName) {
          this.form.stuTwoName = this.dynamicTags[i].userNumber
        }
      }
      //console.log('========================>>>>>>>>>>>>>..数据为', this.form)
      await addSpotDetails(this.form.remark, this.form.buildingName).then(
        (res) => {
          //  console.log('提交成功======>>>>>>>>>>>>>>>>>>..', res)
        }
      )
      setTimeout(this.getDataList(), 800)
      this.drawer = false
      // this.drawerplus = false
    },

    // 关闭重置表单
    resetForm() {
      this.checkedDorms = []
    },

    //  row
    async write(row) {
      if (row != null) {
        this.isUpdate = true
        this.form.spotDate = row.spotDate

        const newDate = row.spotDate.replace(new RegExp('-', 'gm'), '/')

        const params = '?planId=' + this.target.id + '&spotDate=' + newDate
        // 已选寝室
        const data = await getDistribution(params)
        let dorm = []
        for (let i of data) {
          dorm.push(parseInt(i))
        }
        this.checkedDorms = dorm
      } else {
        this.isUpdate = false
        this.form.spotDate = ''
        this.checkedDorms = [this.dorms[0]]
      }
      this.drawer = true
    },
    // 修改按钮
    async upDataDistributionData() {
      for (var i = 0; i < this.dynamicTags.length; i++) {
        if (this.form.roomName == this.dynamicTags[i].userName) {
          this.form.roomName = this.dynamicTags[i].userNumber
        }
        if (this.form.spotDate == this.dynamicTags[i].userName) {
          this.form.spotDate = this.dynamicTags[i].userNumber
        }
      }

      // console.log('========================>>>>>>>>>>>>>..数据为', this.form)
      await updataSpotDetails(this.form.spotDate, this.form.roomName).then(
        (res) => {
          // console.log('修改成功======>>>>>>>>>>>>>>>>>>..', res)
        }
      )

      setTimeout(this.getDataList(), 800)
      this.drawer = false
      // this.drawerplus = false
    },
    //
    cancelForm() {
      // this.drawerplus = false
      this.drawer = false
    },
    // 删除
    delSpotData(spot) {
      this.$confirm('此操作将永久删除该天记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          await deleteDistributionData(new Date(spot.spotDate)).then((res) => {
            this.$message.success(res)
          })
          this.getSpotData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },

    // 更新
    upDataSpotData() {},
  },
}
</script>

<style>
.tar-marigin {
  margin-left: 15px;
  margin-bottom: 10px;
  font-size: 15px;
}
.el-drawer__body {
  overflow: auto;
}
.el-pagination {
  display: flex;
  white-space: nowrap;
  padding: 20px 5px;
  color: #303133;
}
</style>
